<template lang="html">
    <div :class="$style.caryardPanel">
        <el-row>
            <el-col :span="3">
                <el-button
                    type="primary"
                    @click="dialogAddCaryard = true"
                >
                    添加
                    <!-- (目前用户ID:{{ this.$route.params.userId }}) -->
                </el-button>
            </el-col>
        </el-row>
        <br>
        <el-dialog
            title="添加"
            :visible.sync="dialogAddCaryard"
            width="30%"
            :close-on-click-modal="false"
        >
            <el-form
                ref="addCaryardForm"
                :model="addCaryardForm"
                :rules="addCaryardFormRules"
                label-width="120px"
                size="small"
                show-message
                status-icon
                inline-message
            >
                <el-form-item
                    label="箱号"
                    prop="case_number"
                >
                    <el-input
                        v-model="addCaryardForm.case_number"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    label="尺寸"
                    prop="size"
                >
                    <el-select
                        v-model="addCaryardForm.size"
                        placeholder="请选择尺寸"
                    >
                        <el-option
                            v-for="item in sizeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="箱型"
                    prop="box_type"
                >
                    <el-select
                        v-model="addCaryardForm.box_type"
                        placeholder="请选择箱型"
                    >
                        <el-option
                            v-for="item in boxTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="空重"
                    prop="empty_weight"
                >
                    <el-select
                        v-model="addCaryardForm.empty_weight"
                        placeholder="请选择空重"
                    >
                        <el-option
                            v-for="item in emptyWeightOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="箱主代码"
                    prop="box_owner_code"
                >
                    <el-select
                        v-model="addCaryardForm.box_owner_code"
                        placeholder="请选择箱主代码"
                    >
                        <el-option
                            v-for="item in box_owner_codeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="进场类型"
                    prop="entry_type"
                >
                    <el-select
                        v-model="addCaryardForm.entry_type"
                        placeholder="请选择进场类型"
                    >
                        <el-option
                            v-for="item in entryTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="动态类型"
                    prop="dynamic_type"
                >
                    <el-input
                        placeholder="请选择动态类型"
                        v-model="addCaryardForm.dynamic_type"
                        :disabled="true"
                    />
                    <!-- <el-select
                        v-model="addCaryardForm.dynamic_type"
                        placeholder="请选择动态类型"
                    > -->
                    <!-- <el-option
                            v-for="item in dynamicTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        /> -->
                    <!-- </el-select> -->
                </el-form-item>
                <el-form-item
                    :label="number_plateLabel"
                    prop="number_plate"
                >
                    <el-input
                        v-model="addCaryardForm.number_plate"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    :label="bill_of_lading_numberLabel"
                    prop="bill_of_lading_number"
                >
                    <el-input
                        v-model="addCaryardForm.bill_of_lading_number"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    label="堆位"
                    prop="stack_location"
                >
                    <el-select
                        v-model="addCaryardForm.stack_location"
                        placeholder="请选择堆位"
                    >
                        <el-option
                            v-for="item in stackLocationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="note"
                >
                    <el-input
                        v-model="addCaryardForm.note"
                        autocomplete="off"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="restoreAddCaryardForm()"
                    type="danger"
                >
                    清 空
                </el-button>
                <el-button @click="dialogAddCaryard = false">
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="addCaryardFormSubmit()"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="修改记录"
            :visible.sync="dialogCaryard"
            width="30%"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="caryardForm"
                :model="caryardForm"
                size="small"
                :rules="addCaryardFormRules"
                label-width="120px"
                show-message
                status-icon
                inline-message
            >
                <el-form-item
                    label="箱号"
                    prop="case_number"
                >
                    <el-input
                        v-model="caryardForm.case_number"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    label="尺寸"
                    prop="size"
                >
                    <el-select
                        v-model="caryardForm.size"
                        placeholder="请选择尺寸"
                    >
                        <el-option
                            v-for="item in sizeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="箱型"
                    prop="box_type"
                >
                    <el-select
                        v-model="caryardForm.box_type"
                        placeholder="请选择箱型"
                    >
                        <el-option
                            v-for="item in boxTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="空重"
                    prop="empty_weight"
                >
                    <el-select
                        v-model="caryardForm.empty_weight"
                        placeholder="请选择空重"
                    >
                        <el-option
                            v-for="item in emptyWeightOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="箱主代码"
                    prop="box_owner_code"
                >
                    <el-select
                        v-model="caryardForm.box_owner_code"
                        placeholder="请选择箱主代码"
                    >
                        <el-option
                            v-for="item in box_owner_codeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="进场类型"
                    prop="entry_type"
                >
                    <el-select
                        v-model="caryardForm.entry_type"
                        placeholder="请选择进场类型"
                    >
                        <el-option
                            v-for="item in entryTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="动态类型"
                    prop="dynamic_type"
                >
                    <el-input
                        placeholder="请选择动态类型"
                        v-model="caryardForm.dynamic_type"
                        :disabled="true"
                    />
                    <!-- <el-select
                        v-model="caryardForm.dynamic_type"
                        placeholder="请选择动态类型"
                    >
                        <el-option
                            v-for="item in dynamicTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select> -->
                </el-form-item>
                <el-form-item
                    label="车牌号"
                    prop="number_plate"
                >
                    <el-input
                        v-model="caryardForm.number_plate"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    label="提单号"
                    prop="bill_of_lading_number"
                >
                    <el-input
                        v-model="caryardForm.bill_of_lading_number"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item
                    label="堆位"
                    prop="stack_location"
                >
                    <el-select
                        v-model="caryardForm.stack_location"
                        placeholder="请选择堆位"
                    >
                        <el-option
                            v-for="item in stackLocationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="备注"
                    prop="note"
                >
                    <el-input
                        v-model="caryardForm.note"
                        autocomplete="off"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogCaryard = false">
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="updateCaryardSubmit()"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
        <el-row :gutter="10">
            <el-col
                :span="3"
                align="center"
            >
                <el-select
                    v-model="filterValue"
                    placeholder="筛选类型"
                >
                    <el-option
                        v-for="item in filterOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-col>
            <el-col
                :span="5"
                align="center"
            >
                <el-input
                    v-model="filterInputContent"
                    placeholder="请输入需要搜索的内容"
                />
            </el-col>
            <el-col
                :span="4"
            >
                <el-button-group>
                    <el-button
                        type="primary"
                        @click="filter()"
                    >
                        搜索
                    </el-button>
                    <el-button
                        type="warning"
                        icon="el-icon-refresh"
                        @click="restoreFilter()"
                    >
                        恢复
                    </el-button>
                </el-button-group>
            </el-col>
            <el-col
                :span="4"
            >
                <el-button
                    icon="el-icon-refresh"
                    @click="getCaryardList()"
                >
                    刷新表格数据
                </el-button>
            </el-col>

            <el-col
                :span="24"
                align="center"
            >
                <el-table
                    ref="caryardTable"
                    :data="caryardPaginationData"
                    stripe
                    highlight-current-row
                    :row-class-name="tableRowEntryType"
                    style="width: 100%"
                >
                    <!-- :row-class-name="tableRowEntryType" -->
                    <el-table-column
                        property="id"
                        label="ID"
                        align="center"
                        width="60"
                    />
                    <el-table-column
                        property="case_number"
                        label="箱号"
                        width="160"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="size"
                        label="尺寸"
                        width="80"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="box_type"
                        label="箱型"
                        width="80"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="empty_weight"
                        label="空重"
                        width="80"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="box_owner_code"
                        label="箱主代码"
                        width="110"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="entry_type"
                        label="进场类型"
                        width="110"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="dynamic_type"
                        label="动态类型"
                        width="110"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="number_plate"
                        label="车牌号"
                        width="100"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="bill_of_lading_number"
                        label="提单号"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        property="stack_location"
                        label="堆位"
                        width="80"
                        align="center"
                        sortable
                    />
                    <el-table-column
                        label="备注"
                        property="note"
                        align="center"
                    >
                        <!-- <template
                            slot-scope="scope"
                        >
                            <div v-show="scope.row.note!=''">
                                <el-tooltip
                                    style="margin-top:4px"
                                    effect="dark"
                                    :content="scope.row.note"
                                    placement="top"
                                >
                                    <div>{{ scope.row.note==""?"":"···" }}</div>
                                </el-tooltip>
                            </div>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="create_time"
                        label="创建时间"
                        width="100"
                        align="center"
                        sortable
                        :formatter="formatterTime"
                    />
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="openCaryard(scope.$index, scope.row)"
                            >
                                修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteCaryard(scope.$index, scope.row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div :class="$style.pagination">
                    <el-pagination
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="caryardListPerPage"
                        :total="caryardListTotal"
                        :current-page="caryardListCurrentPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        @current-change="current_change"
                        @size-change="caryardListSizeChange"
                    />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import XEUtils from 'xe-utils/methods/xe-utils'
import objectMethods from 'xe-utils/methods/object'
import arrayMethods from 'xe-utils/methods/array'
import baseMethods from 'xe-utils/methods/base'
import numberMethods from 'xe-utils/methods/number'
import dateMethods from 'xe-utils/methods/date'
import stringMethods from 'xe-utils/methods/string'
import functionMethods from 'xe-utils/methods/function'
import urlMethods from 'xe-utils/methods/url'
import browseMethods from 'xe-utils/methods/browse'

XEUtils.mixin(
    // Object
    objectMethods,
    // Array
    arrayMethods,
    // Base
    baseMethods,
    // Number
    numberMethods,
    // Date
    dateMethods,
    // String
    stringMethods,
    // Function
    functionMethods,
    // URL
    urlMethods,
    // Browse
    browseMethods
)
export default {
    data() {
        return {
            loading: false,
            filterInputContent: '',
            filterOptions: [{
                value: 'case_number',
                label: '箱号'
            }, {
                value: 'number_plate',
                label: '车牌号'
            }, {
                value: 'stack_location',
                label: '堆位'
            }, {
                value: 'bill_of_lading_number',
                label: '提单号'
            }],
            filterValue: '',
            caryardDataCache: [],
            caryardList: [],
            caryardListTotal: 0,
            caryardListCurrentPage: 1,
            caryardListPerPage: 10,

            sizeOptions: [{
                value: '20',
                label: '20'
            }, {
                value: '40',
                label: '40'
            }, {
                value: '45',
                label: '45'
            }],
            boxTypeOptions: [{
                value: 'GP',
                label: 'GP'
            }, {
                value: 'HC',
                label: 'HC'
            }, {
                value: 'PF',
                label: 'PF'
            }, {
                value: 'FR',
                label: 'FR'
            }, {
                value: 'OT',
                label: 'OT'
            }, {
                value: 'RH',
                label: 'RH'
            }, {
                value: 'TK',
                label: 'TK'
            }],
            emptyWeightOptions: [{
                value: '空',
                label: '空'
            }, {
                value: '重',
                label: '重'
            }],
            box_owner_codeOptions: [{
                value: 'ZGS',
                label: 'ZGS(普通箱)'
            }, {
                value: 'ZGS1A',
                label: 'ZGS1A(好箱)'
            }, {
                value: 'ZGS1S',
                label: 'ZGS1S(SQ箱，食品级)'
            }, {
                value: 'ZGS1MT',
                label: 'ZGS1MT(装煤炭)'
            }, {
                value: 'ZGS1CX',
                label: 'ZGS1CX(残箱改好的箱)'
            }, {
                value: 'ZGS1DJ',
                label: 'ZGS1DJ(调空)'
            }],
            entryTypeOptions: [{
                value: '装',
                label: '装'
            }, {
                value: '拆',
                label: '拆'
            }],
            dynamicTypeOptions: [{
                    value: '提吉',
                    label: '提吉'
                },
                {
                    value: '还吉',
                    label: '还吉'
                }
            ],
            stackLocationOptions: [{
                value: '好箱区A1',
                label: '好箱区A1'
            }, {
                value: '好箱区A2',
                label: '好箱区A2'
            }, {
                value: '残箱区',
                label: '残箱区'
            }, {
                value: '修箱区',
                label: '修箱区'
            }, {
                value: '未修好箱区A1',
                label: '未修好箱区A1'
            }, {
                value: '未修好箱区A2',
                label: '未修好箱区A2'
            }],

            caryardForm: {
                case_number: null,
                size: null,
                box_type: null,
                empty_weight: null,
                box_owner_code: null,
                entry_type: null,
                dynamic_type: null,
                number_plate: null,
                bill_of_lading_number: null,
                stack_location: null,
                note: null,
            },
            dialogCaryard: false,
            dialogAddCaryard: false,
            addCaryardFormRules: {
                case_number: [{
                    required: true,
                    message: '请填写箱号'
                }],
                size: [{
                    required: true,
                    message: '请输入尺寸'
                }],
                box_type: [{
                    required: true,
                    message: '请输入箱型'
                }],
                empty_weight: [{
                    required: true,
                    message: '请输入空重'
                }],
                box_owner_code: [{
                    required: true,
                    message: '请输入箱主代码'
                }],
                entry_type: [{
                    required: true,
                    message: '请输入进场类型'
                }],
                dynamic_type: [{
                    required: true,
                    message: '请输入动态类型'
                }],
                number_plate: [{
                    required: true,
                    message: '请输入车牌号'
                }],
                bill_of_lading_number: [{
                    required: true,
                    message: '请输入提单号'
                }],
                stack_location: [{
                    required: true,
                    message: '请输入堆位'
                }],
            },
            addCaryardForm: {
                case_number: null,
                size: null,
                box_type: null,
                empty_weight: null,
                box_owner_code: null,
                entry_type: null,
                dynamic_type: '还吉',
                number_plate: null,
                bill_of_lading_number: null,
                stack_location: null,
                note: null,
            },
        }
    },
    methods: {
        init() {
            this.getCaryardList();
        },
        current_change: function(currentPage) {
            this.caryardListCurrentPage = currentPage;
        },
        caryardListSizeChange: function(size) {
            this.caryardListPerPage = size;
        },
        getCaryardList() {
            this.$store.dispatch('getCaryardList').then(res => {
                // this.caryardList = res.data;
                this.caryardDataCache = res.data;
                this.caryardList = res.data;
                this.caryardListTotal = res.data.length;
                // this.caryardListCurrentPage = res.data.current_page;
                // this.caryardListPerPage = res.data.per_page;
            });
        },
        tableRowEntryType({
            row,
            rowIndex
        }) {
            if (row.entry_type == "装") {
                return 'table-warning-row';
            } else if (row.entry_type == "拆") {
                return '';//table-success-row
            }
            return '';
        },
        formatterTime(row, column) {
            // return XEUtils.toDateString(Date.now());
            return XEUtils.toDateString(row.create_time + '000');
        },
        restoreFilter() {
            if (!XEUtils.isEmpty(this.caryardDataCache)) {
                this.caryardList = this.caryardDataCache;
                this.caryardListTotal = this.caryardDataCache.length;
            }
        },
        filter() {
            if (this.filterValue == "") {
                this.$message({
                    message: "筛选类型不能为空",
                    type: 'error',
                    duration: 1500
                })
                return false;
            }
            // if (this.filterInputContent == "") {
            //     this.$message({
            //         message: "搜索内容不能为空",
            //         type: 'error',
            //         duration: 1500
            //     })
            //     return false;
            // }
            if(this.filterInputContent == "" || this.filterInputContent == null){
                this.filterInputContent = null;
            }else{
                this.filterInputContent = this.filterInputContent.trim()
            }

            if (XEUtils.isEmpty(this.caryardDataCache)) {
                this.caryardDataCache = this.caryardList;
            }
            var newCaryardData = [];
            XEUtils.each(this.caryardDataCache, (item, key) => {
                // 通用迭代器，支持遍历任意类型
                var temp = "";
                switch (this.filterValue) {
                    case 'case_number':
                        temp = item.case_number;
                        break;
                    case 'number_plate':
                        temp = item.number_plate;
                        break;
                    case 'stack_location':
                        temp = item.stack_location;
                        break;
                    case 'bill_of_lading_number':
                        temp = item.bill_of_lading_number;
                        break;
                    default:
                }
                // console.log(temp,this.filterInputContent)
                if (temp != null) {
                    // console.log(temp, this.filterInputContent)
                    if (temp.indexOf(this.filterInputContent) != -1) {
                        newCaryardData.push(item)
                    }
                } else {
                    // console.log(temp==this.filterInputContent)
                    if (temp == this.filterInputContent) {
                        newCaryardData.push(item)
                    }
                }
            })
            this.caryardList = newCaryardData;
            //点击搜索后，自动跳转到第一页
            this.caryardListCurrentPage = 1;
            //点击搜索后，更改总条数
            this.caryardListTotal = this.caryardList.length
        },


        //site checkbox changed事件
        changeCheck(item) {
            for (var i = 0; i < this.site_list.length; i++) {
                if (this.site_list[i].id == item.id) {
                    this.site_list[i].checked = !this.site_list[i].checked;
                }
            }
        },
        //修改用户某个Caryard
        updateCaryardSubmit() {
            this.$refs.caryardForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.caryardForm.caryard_id = this.caryardForm.id
                    this.$store.dispatch('putCaryard', this.caryardForm)
                        .then(res => {
                            this.loading = false;
                            this.dialogCaryard = false;
                            this.getCaryardList();
                        }).catch(err => {
                            this.loading = false;
                        });
                }
            })
        },
        openCaryard(index, row) {
            this.loading = false;
            this.$store.dispatch('getCaryardById', row.id).then(res => {
                let resData = res.data
                this.caryardForm.id = resData.id;
                this.caryardForm.case_number = resData.case_number;
                this.caryardForm.size = resData.size;
                this.caryardForm.box_type = resData.box_type;
                this.caryardForm.empty_weight = resData.empty_weight;
                this.caryardForm.box_owner_code = resData.box_owner_code;
                this.caryardForm.entry_type = resData.entry_type;
                this.caryardForm.dynamic_type = resData.dynamic_type;
                this.caryardForm.number_plate = resData.number_plate;
                this.caryardForm.bill_of_lading_number = resData.bill_of_lading_number;
                this.caryardForm.stack_location = resData.stack_location;
                this.caryardForm.note = resData.note;
                this.caryardForm.create_time = resData.create_time;
                this.dialogCaryard = true;
                this.getCaryardList();
            }).catch(err => {
                this.dialogCaryard = true;
            });
        },
        deleteCaryard(index, row) {
            this.$confirm('确认删除吗')
                .then(_ => {
                    this.loading = true;
                    this.$store.dispatch('deleteCaryard', {
                        caryard_id: row.id
                    }).then(res => {
                        this.loading = false;
                        this.getCaryardList();
                    }).catch(err => {
                        this.loading = false;
                    });
                })
                .catch(_ => {});
        },
        addCaryardFormSubmit() {
            this.$refs.addCaryardForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store.dispatch('postCaryard', this.addCaryardForm).then(res => {
                        this.dialogAddCaryard = false;
                        this.loading = false;
                        this.getCaryardList();
                    }).catch(err => {
                        this.loading = false;
                    });;
                }
            })

        },
        restoreAddCaryardForm() {
            this.addCaryardForm.case_number = null;
            this.addCaryardForm.size = null;
            this.addCaryardForm.box_type = null;
            this.addCaryardForm.empty_weight = null;
            this.addCaryardForm.box_owner_code = null;
            this.addCaryardForm.entry_type = null;
            // this.addCaryardForm.dynamic_type = null;
            this.addCaryardForm.number_plate = null;
            this.addCaryardForm.bill_of_lading_number = null;
            this.addCaryardForm.stack_location = null;
            this.addCaryardForm.note = null;
        },
    },
    created() {
        this.init();
    },
    computed: {
        number_plateLabel: function() {
            switch (this.addCaryardForm.entry_type) {
                case "装":
                    return "(出场)车牌号"
                    break;
                case "拆":
                    return "(进场)车牌号"
                    break;
                default:
                    return "车牌号";
            }
        },
        bill_of_lading_numberLabel: function() {
            switch (this.addCaryardForm.entry_type) {
                case "装":
                    return "(出场)提单号"
                    break;
                case "拆":
                    return "(进场)提单号"
                    break;
                default:
                    return "提单号";
            }
        },
        caryardPaginationData: function() {
            return this.caryardList.slice((this.caryardListCurrentPage - 1) * this.caryardListPerPage, this.caryardListCurrentPage * this.caryardListPerPage)
        }
    },
}
</script>

<style lang="scss" scoped module>
.caryardPanel {
    padding-top: 10px;
    height: 800px;
}
.pagination {
    margin: auto;
    padding: auto;
    margin-top: 30px;
}
</style>
